<template>
  <div v-if="commentsData" class="commentslist">
    <!-- 头像，发布者和发布时间 -->
    <div class="user">
      <div class="userLeft">
        <img
          :src="$axios.defaults.baseURL + commentsData.account.defaultAvatar"
          alt
        />
        <span class="username">{{ commentsData.account.nickname }}</span>
        <span class="usertime">{{ time }}</span>
      </div>
      <div class="userRight">{{ parentNum }}</div>
    </div>
    <!-- 递归内容 -->
    <parent
      :parentData="commentsData.parent"
      :level="parentNum"
      @sendParentReply="callReply"
    />
    <!-- 内容 -->
    <div class="content">{{ commentsData.content }}</div>
    <!-- 图片 -->
    <div v-if="commentsData.pics.length == 1" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
    </div>
    <div v-if="commentsData.pics.length == 2" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[1].url" alt />
    </div>
    <div v-if="commentsData.pics.length == 3" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[1].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[2].url" alt />
    </div>
    <div v-if="commentsData.pics.length == 4" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[1].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[2].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[3].url" alt />
    </div>
    <div v-if="commentsData.pics.length == 5" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[1].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[2].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[3].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[4].url" alt />
    </div>
    <div v-if="commentsData.pics.length >= 5" class="picData">
      <img :src="$axios.defaults.baseURL + commentsData.pics[0].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[1].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[2].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[3].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[4].url" alt />
      <img :src="$axios.defaults.baseURL + commentsData.pics[5].url" alt />
      <div style="line-height: 100px">...</div>
    </div>

    <!-- 回复 -->
    <span class="huifu">
      <a
        href="#"
        @click.prevent="reply(commentsData.id, commentsData.account.nickname)"
        >回复</a
      >
    </span>
  </div>
</template>

<script>
// import moment from 'moment'
import parent from "@/components/post/parent"
export default {
  props: ["commentsData"],
  data() {
    return {
      time: "",
    };
  },
  components:{parent},
  
  computed: {
    parentNum() {
      //如果是没有parent回复则返回1
      if (this.commentsData.parent) {
        return this.diguiParent(this.commentsData.parent, 2);
      } else {
        return 1;
      }
    },
  },
  mounted() {
    // this.$moment = moment
    // console.log(this.commentsData);
    this.time = this.formatDate(this.commentsData.updated_at);
  },
  methods: {
    //时间转换方法
    formatDate(time) {
      var data = new Date(time);
      var year = data.getFullYear(); //取得4位数的年份
      var month = data.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = data.getDate(); //返回日期月份中的天数（1到31）
      var hour = data.getHours(); //返回日期中的小时数（0到23）
      var minute = data.getMinutes(); //返回日期中的分钟数（0到59）
      return year + "-" + month + "-" + date + " " + hour + ":" + minute;
    },
    diguiParent(parent, currentDepth) {
      if (parent.parent) {
        return this.diguiParent(parent.parent, currentDepth + 1);
      } else if (!parent.parent) {
        return currentDepth;
      }
    },

    //回复
    reply(id, nickname) {
      this.$emit("sendReply", id, nickname);
    },
    //递归回复
    callReply(parenId, user) {
      this.$emit("sendReply", parenId, user);
    },
  },
};
</script>

<style lang="less" scoped>
.commentslist {
  padding: 20px;
  border: 1px solid #ccc;
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userLeft {
      img {
        width: 20px;
        height: 20px;
      }
      .username {
        font-size: 12px;
        line-height: 12px;
        color: #666;
        padding: 0 5px;
      }
      .usertime {
        font-size: 12px;
        color: #999;
      }
    }
    .userRight {
      font-size: 12px;
    }
  }
  .content {
    padding: 10px 0 0 20px;
  }
  .picData {
    width: 100px;
    height: 100px;
    display: flex;

    img {
      margin-right: 10px;
      width: 100%;
      height: 100%;
    }
  }
  .huifu {
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    a {
      font-size: 12px;
      color: #1e50a2;
    }
  }
}
.commentslist:hover .huifu {
  visibility: visible;
}
</style>